<script lang="ts" setup>
import auth from '@/api/auth'
import { useHomeStore } from '@/store'
import { useAuthStore } from '@/store'
import { cleanStringCompact } from '@/utils/shared.ts'

const authStore = useAuthStore()
const { mchtNo, phoneNumber } = storeToRefs(useHomeStore())

const form = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})
async function submit() {
  if (form.value.oldPassword === '') {
    uni.showToast({
      icon: 'none',
      title: '请输入原密码',
    })
  }
  else if (form.value.newPassword === '' || form.value.newPassword.length < 9) {
    uni.showToast({
      icon: 'none',
      title: '请输入新密码,且密码需大于等于9位',
    })
  }
  else if (form.value.confirmPassword === '' || form.value.confirmPassword.length < 9) {
    uni.showToast({
      icon: 'none',
      title: '请输入确认密码,且密码需大于等于9位',
    })
  }
  else if (form.value.newPassword !== form.value.confirmPassword) {
    uni.showToast({
      icon: 'none',
      title: '确认密码与新密码不一致',
    })
  }
  else {
    const { data } = await auth.modifyPassword({
      currentPassword: form.value.oldPassword,
      newPassword: form.value.newPassword
    })
    if (data.status === 'success') {
      // 清理登录状态
      authStore.logout()
      uni.showToast({
        icon: 'success',
        title: data.message
      })
      uni.reLaunch({
        url: '/pages/login/index'
      })
    }
  }
}
function cancel() {
  uni.navigateBack({
    delta: 1,
  })
}
const iosPhone = ref(1)

const passwordType = ref('password')
function handlePassword() {
  passwordType.value === 'password'
    ? (passwordType.value = 'text')
    : (passwordType.value = 'password')
}

// 处理输入事件
function handleInputPassword(inputName, event) {
  const value = event
  const filteredValue = cleanStringCompact(value)
  form.value[inputName] = filteredValue
}
</script>

<template>
  <div class="modify">
    <nut-form>
      <nut-form-item label="登录手机号">
        <nut-input v-model="phoneNumber" class="nut-input-text" placeholder="请输入登录手机号" type="text" readonly
          input-align="right" />
      </nut-form-item>
      <nut-form-item label="商户/门店号">
        <nut-input v-model="mchtNo" class="nut-input-text" placeholder="请输入商户/门店号" type="text" readonly
          input-align="right" />
      </nut-form-item>
      <nut-input v-model="iosPhone" type="password" placeholder="" custom-class="displayPwd" />
      <nut-form-item label="原密码">
        <!-- <nut-input v-model="form.oldPassword" class="nut-input-text" placeholder="请输入原密码" type="password"
          input-align="right" /> -->

        <nut-input v-if="passwordType === 'password'" v-model="form.oldPassword" placeholder="请输入原密码"
          :type="passwordType" input-align="right" class="nut-input-text"
          @input="handleInputPassword('oldPassword', $event)">
          <template #right>
            <div class="show-password" style="height: auto" @click="handlePassword">
              <div class="i-ri:eye-off-fill"></div>
            </div>
          </template>
        </nut-input>

        <nut-input v-else v-model="form.oldPassword" placeholder="请输入原密码" :type="passwordType" input-align="right"
          class="nut-input-text" @input="handleInputPassword('oldPassword', $event)">
          <template #right>
            <div class="show-password" style="height: auto" @click="handlePassword">
              <div class="i-ri:eye-fill"></div>
            </div>
          </template>
        </nut-input>

      </nut-form-item>
      <nut-form-item label="新密码">
        <!-- <nut-input v-model="form.newPassword" class="nut-input-text" placeholder="请输入新密码" type="password"
          input-align="right" /> -->

        <nut-input v-if="passwordType === 'password'" v-model="form.newPassword" placeholder="请输入原密码"
          :type="passwordType" input-align="right" class="nut-input-text"
          @input="handleInputPassword('newPassword', $event)">
          <template #right>
            <div class="show-password" style="height: auto" @click="handlePassword">
              <div class="i-ri:eye-off-fill"></div>
            </div>
          </template>
        </nut-input>

        <nut-input v-else v-model="form.newPassword" placeholder="请输入原密码" :type="passwordType" input-align="right"
          class="nut-input-text" @input="handleInputPassword('newPassword', $event)">
          <template #right>
            <div class="show-password" style="height: auto" @click="handlePassword">
              <div class="i-ri:eye-fill"></div>
            </div>
          </template>
        </nut-input>
      </nut-form-item>
      <nut-form-item label="密码强度" v-if="form.newPassword">
        <check-psd v-model="form.newPassword"></check-psd>
      </nut-form-item>
      <nut-form-item label="确认密码">
        <!-- <nut-input v-model="form.confirmPassword" class="nut-input-text" placeholder="请输入确认密码" type="password"
          input-align="right" /> -->

        <nut-input v-if="passwordType === 'password'" v-model="form.confirmPassword" placeholder="请输入确认密码"
          :type="passwordType" input-align="right" class="nut-input-text"
          @input="handleInputPassword('confirmPassword', $event)">
          <template #right>
            <div class="show-password" style="height: auto" @click="handlePassword">
              <div class="i-ri:eye-off-fill"></div>
            </div>
          </template>
        </nut-input>

        <nut-input v-else v-model="form.confirmPassword" placeholder="请输入确认密码" :type="passwordType" input-align="right"
          class="nut-input-text" @input="handleInputPassword('confirmPassword', $event)">
          <template #right>
            <div class="show-password" style="height: auto" @click="handlePassword">
              <div class="i-ri:eye-fill"></div>
            </div>
          </template>
        </nut-input>

      </nut-form-item>
    </nut-form>
    <div class="li-btns">
      <div class="li-btns-lft shake_o" @click="cancel">取消</div>
      <div class="li-btns-rit shake_o" @click="submit">修改</div>
    </div>
  </div>
</template>

<route lang="json">
  {
    "layout": "home",
    "style": {
      "navigationBarTitleText": "修改密码",
      "backgroundColorContent": "#f1f1f1"
    }
  }
  </route>

  <style lang="sass" scoped>
  .modify
    padding: 20rpx
    .buttons
      margin: 40px 20px
      .button
        margin-bottom: 10px
  </style>
